<template>
  <el-drawer
    title="客群数据批量导入"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer batch-drawer factory-import-drawer"
    v-drawerResize
    v-loading="loading"
  >
    <div class="tag-import">
      <div class="drawer-wrap">
        <div class="drawer-content tag-scrollbar">
          <div class="upload-page">
            <el-row>
              <el-col :span="24" align="center">
                <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="90px">
                  <el-form-item prop="identifyTagId" label="唯一标识">
                    <el-select v-model="editForm.identifyTagId">
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in idList"
                        :key="item.tagId"
                        :label="item.tagNm"
                        :value="item.tagId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <tag-upload
              ref="fileUpload"
              drag
              :fileList="upload.fileList"
              @uploadFun="fileFun"
              @removeFun="fileRemove"
              :fileLimit="upload.fileLimit"
            >
              <template #tip>
                只能上传对应的模板文件，一次导入只能上传一个文件
              </template>
            </tag-upload>
          </div>
        </div>
      </div>
    </div>

    <div class="drawer-btns">
      <el-button size="medium" @click="beforeClose()">取消</el-button>
      <el-button type="primary" size="medium" @click="handleDownload">
        模板下载
      </el-button>
      <el-button type="primary" size="medium" @click="reset">重新上传</el-button>
      <el-button type="primary" size="medium" @click="next" v-if="!error">
        完成
      </el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      loading: false,
      error: false,
      tagId: '',
      editForm: {
        identifyTagId: ''
      },
      editFormRules: {
        identifyTagId: [{ required: true, message: '唯一标识不能为空', trigger: 'change' }]
      },
      idList: [],
      sourceData: {
        custGroupId: '',
        dbNm: '',
        tableNm: '',
        fieldNm: ''
      },
      upload: {
        fileId: '',
        fileList: [],
        fileLimit: {
          type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          typeMsg: '只能上传excel文件'
        }
      }
    }
  },
  methods: {
    showDrawer(tagId) {
      this.tagId = tagId
      this.getIdList()
      this.drawerVisible = true
    },
    getIdList() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astData/import/allIdentifierTag'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.idList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    fileFun(params) {
      this.upload.fileId = params.fileId
      this.upload.fileList = params.fileList.slice(-1)
    },
    fileRemove() {
      this.upload.fileId = ''
    },
    reset() {
      this.loading = false
      this.editForm.identifyTagId = ''
      this.idList = []
      this.upload.fileId = ''
      this.upload.fileList = []
      this.sourceData = {
        custGroupId: '',
        dbNm: '',
        tableNm: '',
        fieldNm: ''
      }
      this.error = false
      this.$refs.editForm.clearValidate()
    },
    getPreviewList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('cust/import/excel'),
        method: 'post',
        data: this.$ajax.setData({
          fileId: this.upload.fileId,
          tagId: this.tagId,
          identifyTagId: this.editForm.identifyTagId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.sourceData.custGroupId = data.data.custGroupId
          this.sourceData.dbNm = data.data.dbNm
          this.sourceData.tableNm = data.data.tableNm
          this.sourceData.fieldNm = data.data.fieldNm
          this.$emit('callback', this.sourceData)
          this.reset()
          this.drawerVisible = false
        } else {
          this.$message.error(data.data || data.msg)
          this.error = true
        }
        this.loading = false
      })
    },
    next() {
      if (this.loading) {
        this.$alert('请等待加载完成')
        return
      }
      this.$refs.editForm.validate()
      if (!this.editForm.identifyTagId) return
      if (!this.upload.fileId) {
        this.$alert('请先上传需要导入的文件')
        return
      }
      this.getPreviewList()
    },
    beforeClose() {
      this.$confirm('确定要取消导入吗？')
        .then(() => {
          this.reset()
          this.drawerVisible = false
          this.$emit('callback')
        })
        .catch(() => {})
    },
    handleDownload() {
      this.$ajax({
        url: this.$ajax.setUrl('cust/import/tmpl'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    close() {
      this.reset()
      this.drawerVisible = false
      this.$emit('callback')
    }
  }
}
</script>

<style lang="scss">
.factory-import-drawer {
  .el-form {
    width: 360px;
  }
}
</style>
